<template >
  <div>
    <!-- 二级路由坑 -->
    <!-- 搜索页和首页不能共存，要加判断隐藏页面 -->
    <!-- 在this中找到$route根据路由判断 -->
    <!-- 路由等于搜索页的路由的时候显示搜素页 -->
    <router-view v-if="$route.path == '/home/search'"></router-view>
    <div v-else>
      <!-- 搜索框 -->
      <van-search
        av-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @click="$router.push('/home/search')"
      />

      <!-- 使用轮播图组件 -->
      <Swipe :bannerArr="bannerArr"></Swipe>

      <!-- 使用导航栏组件 -->
      <Grid :channelArr="channelArr"></Grid>

      <!-- 品牌招商只供组件 -->
      <Brand :brandListArr="brandListArr"></Brand>

      <!-- 新品首发组件 -->
      <NewProduct :newGoodsListArr="newGoodsListArr"></NewProduct>

      <!-- 人气推荐的组件 -->
      <Popularity :hotGoodsListArr="hotGoodsListArr"></Popularity>

      <!-- 专题精选组件 -->
      <Special :topicListArr="topicListArr"></Special>

      <!-- 居家组件 -->
      <div v-for="i in HomeEArr" :key="i.id">
        <HomeE :i="i"></HomeE>
      </div>
    </div>
  </div>
</template>


<script>
// 引入轮播图
import Swipe from "@/components/Swipe.vue";

// 导入首页接口请求
// 解构赋值导入http.js里边的首页的接口函数
import { getIndexData } from "@/utils/http";
// console.log(getIndexData);

// 引入图标导航
import Grid from "@/components/Grid.vue";

// 引入牌招商直供
import Brand from "@/components/Brand.vue";

// 引入新品首发
import NewProduct from "@/components/NewProduct.vue";

// 引入人气推荐
import Popularity from "@/components/Popularity.vue";

// 引入专题精选组件
import Special from "@/components/Special.vue";

// 居家的组件
import HomeE from "@/components/HomeE.vue";

export default {
  name: "Home",
  data() {
    return {
      value: "", //搜索关键字
      bannerArr: [], //定义一个空数组来接受获取的轮播图数据,把获取的数组传递子组件
      channelArr: [], //定义一个空数组把获取的图标导航传递给子组件
      brandListArr: [], //定义品牌制造商直供的空数组
      newGoodsListArr: [], //定义一个新品首发的空数组
      hotGoodsListArr: {}, //定义一个人气推荐的空对象
      topicListArr: [], //定义专题精选的空对象
      HomeEArr: [],
    };
  },
  components: {
    Swipe, //轮播
    Grid, //图标导航
    Brand, //招商直供
    NewProduct, //新品首发
    Popularity, //人气推荐
    Special, //专题精选
    HomeE, //居家
  },
  created() {
    getIndexData().then((res) => {
      // 获取轮播图传给上边使用的地方
      // console.log(res);
      // console.log(res.banner);
      // console.log(res);
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandListArr = res.data.data.brandList;
      this.newGoodsListArr = res.data.data.newGoodsList;
      this.hotGoodsListArr = res.data.data.hotGoodsList;
      this.topicListArr = res.data.data.topicList;
      this.HomeEArr = res.data.data.categoryList;
    });
  },
};
</script>

<style>
</style>